---
permalink: "/ui/ui-elements/forms/switch/index.xml"
tags: "UI/UI Elements/Forms"
hv_title: "Switch"
hv_button_behavior: "back"
---
{% extends 'templates/scrollview.xml.njk' %}
{% from 'macros/about/index.xml.njk' import about %}
{% from 'macros/description/index.xml.njk' import description %}

{% block styles %}
  <style id="switch-styled" color="#E1E1E1" backgroundColor="red">
    <modifier selected="true">
    <style backgroundColor="#550000" color="#ffaaaa"/>
    </modifier>
  </style>
  <style
    id="Input"
    borderBottomColor="#E1E1E1"
    borderBottomWidth="1"
    borderColor="#4E4D4D"
    flex="1"
    fontSize="16"
    fontWeight="normal"
    paddingBottom="8"
    paddingTop="8">
    <modifier pressed="true">
    <style borderBottomColor="#4778FF"/>
    </modifier>
    <modifier focused="true">
    <style borderBottomColor="#4778FF"/>
    </modifier>
  </style>
  <style id="help--error" color="#FF4847"/>
  <style id="label" borderColor="#4E4D4D" fontSize="16" fontWeight="bold" lineHeight="24" marginBottom="8"/>
  <style id="Input__Text" fontSize="16" fontWeight="normal"/>
  <style id="switch" backgroundColor="#E1E1E1">
    <modifier selected="true">
    <style backgroundColor="#4778FF"/>
    </modifier>
  </style>
  <style id="FormGroup" flex="1" marginLeft="24" marginRight="24" marginTop="48"/>
  <style id="Input--Error" borderBottomColor="#FF4847">
    <modifier focused="true">
    <style borderBottomColor="#FF4847"/>
    </modifier>
  </style>
  <style id="Input__Text--Error" color="#FF4847"/>
  <style id="help" borderColor="#FF4847" fontSize="16" fontWeight="normal" lineHeight="24" marginTop="16"/>
{% endblock %}

{% block content %}
  {{ about('Switches allow users to select a boolean input') }}
  {% include './_form.xml.njk' %}
{% endblock %}
